<template>
    <div class="box">
   <div class="banner">
    <h2>新人有礼 福利专区 &nbsp; <span id="ban_title">一元专区|新人专享券|新人特惠</span></h2> 
    </div>
    <br>
    <div class="content_total">
        <ul class="content_list">
            <li class="content cl" v-for="(item,i) in arr" :key="i">
                <img :src="item.imgUrl" alt="" width="60px" height="80px">
                <span id="small">{{ item.con }}</span> <span id="zi">{{ item.zi }}</span><br>
                <span id="price">{{ item.price }}</span>
            </li>
            
        </ul>
    
</div>
  </div>
</template>
 
<script>
export default {
   data() {
    return {
        arr:[
            {
                imgUrl:require("../assets/img/watch.jpg"),
                con:"新人价",
                price:"￥599",
                zi:"起"

            },
            {
                imgUrl:require("../assets/img/耳机.jpg"),
                con:"新人价",
                price:"￥499",
                zi:"起"

            },
            {
                imgUrl:require("../assets/img/watch.jpg"),
                con:"新人价",
                price:"￥349",
                zi:"起"

            },
            {
                imgUrl:require("../assets/img/watch.jpg"),
                con:"限购一件",
                price:"￥1"

            },    {
                imgUrl:require("../assets/img/watch.jpg"),
                con:"限购一件",
                price:"￥1"

            },
           
        ]
    }
   },
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    background-color: rgb(128, 128, 128);
}
.box{
    width: 1000px;
    height: 220px;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
}
.banner{
    width: 800px;
    height: 40px;
}
h2{
    text-align: left;
    padding: 15px 0 0 10px ;
    box-sizing: border-box;
}
.content_total{
    margin-top:30px ;
    display: flex;
    justify-content: space-evenly;
}

  #ban_title{
    font-size: 12px;
    color: rgb(190, 190, 190);
    letter-spacing: 2px;
  }
  .content{
    border-right: 2px dotted rgb(190, 190, 190);
    width: 200px;
    height: 100px;
    position: relative;
 }
 .content img{
    position: absolute;
    left: 27px;
 }
 .content #small{
    width: 45px;
    height: 15px;
    font-size: 10px;
    background-color: rgb(204, 204, 204);
    border-radius: 2px;
    color: rgb(151, 151, 151);
    position:absolute ;
    top: 27px;
   text-align: center;
   line-height: 15px;
 }
 .content #price{
    font-size: 16px;
    color:#000;
    position: absolute;
    top: 48px;
    left: 97px;    
   
 }
 .content #zi{
    font-size: 13px;
    color:#000;
    position: absolute;
    top: 51px;
    left: 140px;    
   
 }
.cl:nth-child(5){
    border-right:none;
}
.content_list{
    display: flex;
    justify-content: flex-start;
}
</style>